<script setup>
import {ref} from 'vue'
import List from '@/components/List/List.vue'

const users = ref([
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
  {id: 3, name: 'Charlie'}
])
const selectedUsers = ref([])

const tags = ref(['Vue', 'React', 'Angular', 'Svelte'])

// 添加示例数据到 paginatedData
const paginatedData = ref([
  { id: 1, name: 'Product 1', image: 'https://picsum.photos/150/150?random=1', price: 100 },
  { id: 2, name: 'Product 2', image: 'https://picsum.photos/150/150?random=2', price: 200 },
  { id: 3, name: 'Product 3', image: 'https://picsum.photos/150/150?random=3', price: 300 },
  { id: 4, name: 'Product 4', image: 'https://picsum.photos/150/150?random=4', price: 400 },
  { id: 5, name: 'Product 5', image: 'https://picsum.photos/150/150?random=5', price: 500 }
])

// 添加示例数据到 products
const products = ref([
  { id: 1, name: 'Product A', image: 'https://picsum.photos/150/150?random=A', price: 150 },
  { id: 2, name: 'Product B', image: 'https://picsum.photos/150/150?random=B', price: 250 },
  { id: 3, name: 'Product C', image: 'https://picsum.photos/150/150?random=C', price: 350 }
])

const isLoading = ref(false)

const loadMoreData = async () => {
  isLoading.value = true
  // 模拟异步加载更多数据
  await new Promise(resolve => setTimeout(resolve, 1000))
  // 这里可以添加逻辑来加载更多数据
  const newProducts = [
    { id: 6, name: 'Product 6', image: 'https://picsum.photos/150/150?random=6', price: 600 },
    { id: 7, name: 'Product 7', image: 'https://picsum.photos/150/150?random=7', price: 700 },
    { id: 8, name: 'Product 8', image: 'https://picsum.photos/150/150?random=8', price: 800 }
  ]
  paginatedData.value.push(...newProducts)
  isLoading.value = false
}


</script>

<template>
  <div>
    <!--    基础列表：-->
    <h2>基础列表</h2>
    <List :items="['Apple', 'Banana', 'Orange']"/>
    <!--    带选择功能：-->
    <h2>带选择功能</h2>
    <List
        :items="users"
        item-key="id"
        selectable
        multiple
        v-model:selected-items="selectedUsers"
        bordered
        striped
    />
    <!--    水平布局：-->
    <h2>水平布局</h2>
    <List
        :items="tags"
        direction="horizontal"
        justifyContent="center"
        size="small"
    />
    <!--    自定义插槽：-->
    <h2>自定义插槽</h2>
    <List :items="products" item-key="id">
      <template #default="{ item }">
        <div class="product-item">
          <img :src="item.image" class="thumbnail">
          <h3>{{ item.name }}</h3>
          <p>￥{{ item.price }}</p>
        </div>
      </template>
    </List>
    <!--    加载更多：-->
    <h2>加载更多</h2>
    <List
        :items="paginatedData"
        :loading="isLoading"
        @load-more="loadMoreData"
    />
  </div>

</template>

<style scoped>
.product-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

.thumbnail {
  width: 150px;
  height: 150px;
  object-fit: cover;
}
</style>